<template>
  <div class="">
    <div class="content content--canvas">
				<h2 class="content__title">Shift</h2>
		</div>
    <div class="video" v-if="false">
        <!-- :poster="videoImg" -->
        <video id="myvideo" :src="videoSrc" :muted="muteStatus" :autoplay="videoImg" height="414" width="720">
            your browser does not support the video tag
        </video>
        <div class="op-video">
          <span class="ico ico-sound" :class="{ active: isMute }" v-on:click="closeSoundClick()">closeSoundClick</span>
          <span class="ico ico-skip"></span>
          <span class="ico ico-video" :class="{ hide: isPlay }" v-on:click="playClick()">playClick</span>
        </div>
    </div>
  </div>
</template>
 
<script>
import { floor, rand, randIn, randRange, fadeIn, fadeOut, fadeInOut, dist, angle, lerp, HALF_PI, TAU, TO_RAD } from './js/util.js'
const { PI, cos, sin, abs, sqrt, pow, round, random, atan2 } = Math
export default {
  data () {
    return {
      particleCount: 100,
      particlePropCount: 9,
      particlePropsLength: 100 * 9,
      baseTTL: 100,
      rangeTTL: 500,
      baseSpeed: 0.1,
      rangeSpeed: 1,
      baseSize: 2,
      rangeSize: 10,
      baseHue: 10,
      rangeHue: 100,
      noiseSteps: 2,
      xOff: 0.0015,
      yOff: 0.0015,
      zOff: 0.0015,
      backgroundColor: 'hsla(0,0%,5%,1)',

      container: null,
      canvas: {
        a: document.createElement('canvas'),
        b: document.createElement('canvas')
      },
      ctx: null,
      center: [],
      gradient: null,
      tick: null,
      particleProps: null,

      videoSrc: require('./img/curve.mp4'),
      videoImg: require('@/assets/404_images/404.png'),
      playStatus:'',
      muteStatus:'',
      isMute:true,
      isPlay:false
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.createCanvas()
      this.resize()
      this.initParticles()
      this.draw()
    },

    initParticles() {
      this.tick = 0;
      this.particleProps = new Float32Array(this.particlePropsLength);

      let i;
      
      for (i = 0; i < this.particlePropsLength; i += this.particlePropCount) {
        this.initParticle(i);
      }
    },
    initParticle(i) {
      let theta, x, y, vx, vy, life, ttl, speed, size, hue;

      x = rand(this.canvas.a.width);
      y = rand(this.canvas.a.height);
      theta = angle(x, y,  this.center[0],  this.center[1]);
      vx = cos(theta) * 6;
      vy = sin(theta) * 6;
      life = 0;
      ttl = this.baseTTL + rand(this.rangeTTL);
      speed = this.baseSpeed + rand(this.rangeSpeed);
      size = this.baseSize + rand(this.rangeSize);
      hue = this.baseHue + rand(this.rangeHue);

      this.particleProps.set([x, y, vx, vy, life, ttl, speed, size, hue], i);
    },
    drawParticles() {
      let i;

      for (i = 0; i < this.particlePropsLength; i += this.particlePropCount) {
        this.updateParticle(i);
      }
    },
    updateParticle(i) {
      let i2=1+i, i3=2+i, i4=3+i, i5=4+i, i6=5+i, i7=6+i, i8=7+i, i9=8+i;
      let x, y, theta, vx, vy, life, ttl, speed, x2, y2, size, hue;

      x = this.particleProps[i];
      y = this.particleProps[i2];
      theta = angle(x, y,  this.center[0],  this.center[1]) + 0.75 * HALF_PI;
      vx = lerp(this.particleProps[i3], 2 * cos(theta), 0.05);
      vy = lerp(this.particleProps[i4], 2 * sin(theta), 0.05);
      life = this.particleProps[i5];
      ttl = this.particleProps[i6];
      speed = this.particleProps[i7];
      x2 = x + vx * speed;
      y2 = y + vy * speed;
      size = this.particleProps[i8];
      hue = this.particleProps[i9];

      this.drawParticle(x, y, theta, life, ttl, size, hue);

      life++;

      this.particleProps[i] = x2;
      this.particleProps[i2] = y2;
      this.particleProps[i3] = vx;
      this.particleProps[i4] = vy;
      this.particleProps[i5] = life;

      life > ttl && this.initParticle(i);
    },
    drawParticle(x, y, theta, life, ttl, size, hue) {
      let xRel = x - (0.5 * size), yRel = y - (0.5 * size);
      
      this.ctx.a.save();
      this.ctx.a.lineCap = 'round';
      this.ctx.a.lineWidth = 1;
      this.ctx.a.strokeStyle = `hsla(${hue},100%,60%,${fadeInOut(life, ttl)})`;
      this.ctx.a.beginPath();
      this.ctx.a.translate(xRel, yRel);
      this.ctx.a.rotate(theta);
      this.ctx.a.translate(-xRel, -yRel);
      this.ctx.a.strokeRect(xRel, yRel, size, size);
      this.ctx.a.closePath();
      this.ctx.a.restore();
    },


    checkBounds(x, y, radius) {
      return (
        x < -radius ||
        x > this.canvas.a.width + radius ||
        y < -radius ||
        y > this.canvas.a.height + radius
      );
    },

    createCanvas() {
      this.container = document.querySelector('.content--canvas');
      this.canvas.b.style = `
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      `;
      this.container.appendChild(this.canvas.b);
      this.ctx = {
        a: this.canvas.a.getContext('2d'),
        b: this.canvas.b.getContext('2d')
      };
    },
    resize() {
      const { innerWidth, innerHeight } = window;
      
      this.canvas.a.width = innerWidth
      this.canvas.a.height = innerHeight

      this.ctx.a.drawImage(this.canvas.b, 0, 0)

      this.canvas.b.width = innerWidth
      this.canvas.b.height = innerHeight
      
      this.ctx.b.drawImage(this.canvas.a, 0, 0)
      
       this.center[0] = 0.5 * this.canvas.a.width
       this.center[1] = 0.5 * this.canvas.a.height
    },
    renderGlow() {
      this.ctx.b.save();
      this.ctx.b.filter = 'blur(8px) brightness(200%)';
      this.ctx.b.globalCompositeOperation = 'lighter';
      this.ctx.b.drawImage(this.canvas.a, 0, 0);
      this.ctx.b.restore();

      this.ctx.b.save();
      this.ctx.b.filter = 'blur(4px) brightness(200%)';
      this.ctx.b.globalCompositeOperation = 'lighter';
      this.ctx.b.drawImage(this.canvas.a, 0, 0);
      this.ctx.b.restore();
    },
    render() {
      this.ctx.b.save();
      // this.ctx.b.filter = 'blur(5px)';
      this.ctx.b.globalCompositeOperation = 'lighter';
      this.ctx.b.drawImage(this.canvas.a, 0, 0);
      this.ctx.b.restore();
    },

    draw() {
      this.tick++;
      this.ctx.a.clearRect(0, 0, this.canvas.a.width, this.canvas.a.height);
      this.ctx.b.fillStyle = this.backgroundColor;
      this.ctx.b.fillRect(0, 0, this.canvas.b.width, this.canvas.b.height);
      this.drawParticles()
      this.renderGlow()
      this.render()
      window.requestAnimationFrame(this.draw);
    },

    // video
    playClick(){
      this.isPlay = !this.isPlay;
      this.playStatus= 'autoplay';
    },
    closeSoundClick(){
      this.isMute = !this.isMute;
      if(this.isMute){
          this.muteStatus = '';
      }else{
          this.muteStatus = 'muted';
      }
    }

  }
}
</script>
 
<style scoped lang="scss">
  .video{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    span{
      display: inline-block;
      padding: 5px;
      color: #ffffff;
    }
  }
</style>